
<template>
 <div style="width:96%;marginLeft:2%;padding:20px">
      <div style="border:1px solid #D5D5D5;marginBottom:10px;paddingLeft:20px;textAlign:left">
        <div style="margin:20px 10px;fontWeight:bold">{{ExhiTitle}}</div>
        <div style="height:50px;textAlign:left;fontWeight:bold;marginBottom:80px">
              <div>
                 
                    <el-form  label-width="100px" :model="addExhiProdct" :rules="addExhiProRules" ref="addExhiProdctRef" :inline="true" >
                        <el-form-item label="展项名称" prop="displayName">
                            <el-input v-model="addExhiProdct.displayName" placeholder="请输入展项名称"></el-input>
                        </el-form-item>
                        <el-form-item label="备注" prop="remark">
                            <el-input v-model="addExhiProdct.remark" placeholder="请输入展项名称"></el-input>
                        </el-form-item>
                       <el-button type="primary" plain @click="ExhiDeternime">{{ExhiTitle==="添加展项"?"添加":"修改"}}</el-button>
                    </el-form>
                <div style="margin:20px 20px">
                    <el-input style="width:200px"  placeholder="请输入产品名称"   v-model="productpage.productName"   clearable></el-input>
                     <el-button style="marginLeft:20px" type="primary" size="small" @click="searProduct">搜索</el-button>
                </div>
              </div>
            <el-dialog  title="修改报价单名称" :visible.sync="titTleDia"  width="30%">
                <el-form ref="addEditform" :rules="addEditformRules" :model="titleForm" label-width="100px">
                <el-form-item label="报价名称：" prop="quoteTitle">
                <el-input v-model="titleForm.quoteTitle"></el-input>
                </el-form-item>
                <el-form-item label="备注：" prop="remakk">
                <el-input v-model="titleForm.remark"></el-input>
                </el-form-item>
                </el-form>
                <div slot="footer" class="dialog-footer">
                <el-button @click="titTleDia=false">取 消</el-button>
                <el-button type="primary" @click="TitleEdit">保存</el-button>
                </div>
            </el-dialog>
       </div>
      </div>  
      
    <div  style="display:flex;borderTop:1px solid transparent">
    <div style="width:15%;border:1px solid #D5D5D5;marginRight:5px">
    <el-tree
      :data="treeData"
      node-key="id"
      handleCheckChange
      @node-click="handleCheckChange"
     
      :props="defaultProps">
    </el-tree>
    </div>
    <div style="width:65%">
       <el-table
           border=""
            v-loading="Loading"
            :data="newProductList"
               @select="gaibian"
              ref="multipleTable"
             style="width:100%;margin-bottom: 20px;"
             @selection-change="handleSelectionChange"
            :row-style="getStyle"
             :row-key="getkeyId"
            >
             <el-table-column
                type="selection"
                width="55">
            </el-table-column>
             <el-table-column type="expand">
                 <template slot-scope="props">
                     <el-table border="" :data="props.row.secondList" :show-header="false"  :row-style="getStyle"  row-key="id" 
                         >
                         <el-table-column prop="productName" label="产品名称" align="right">
                         </el-table-column>
                         <el-table-column prop="brand" label="品牌" align="right">
                         </el-table-column>
                         <el-table-column prop="size" label="尺寸" align="right">
                         </el-table-column>
                         <el-table-column prop="price" label="价格" align="right">
                         </el-table-column>
                         <el-table-column prop="model" label="型号" align="right">
                         </el-table-column>
                         <el-table-column prop="param" width="300" label="参数" align="center">
                          <template slot-scope="props">
                           <div class="overCell" :title="props.row.param">{{props.row.param}}</div>
                          </template>
                         </el-table-column>
                
                     </el-table>
                 </template>
             </el-table-column>
            <el-table-column
            prop="productName"
            label="产品名称"
            align="center"
           >
            </el-table-column>
            <el-table-column
             prop="brand"
            align="center"
            label="品牌">
            </el-table-column>
            <el-table-column
            prop="size"
            label="尺寸"
            align="center"
            >
            </el-table-column>
            <el-table-column
            prop="price"
            align="center"
            label="价格">
           </el-table-column>
            <el-table-column
            prop="model"
            align="center"
            label="型号">
           </el-table-column>
            <el-table-column
            prop="param"
            width="250"
            align="center"
            label="主材参数" >
            <template slot-scope="props">
                  <div class="overCell" :title="props.row.param">{{props.row.param}}</div>
            </template>
           </el-table-column>
            
       </el-table>
        <div style="textAlign:right">
            <!-- 分页器 -->
        <el-pagination 
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :page-sizes="[1,2,3,4,5,10,15,20]"
          :page-size="productpage.pageSize"
          layout="sizes, prev, pager, next"
          :total="total">
        </el-pagination>
        </div>
    </div>
    <div class="shopBox">
      <div class="shopBoxTop">
        <h4>已选择的商品</h4>
       <div  v-for="item in Allselect" :key="item.id">
                <div>
                    <p style="fontSize:14px;lineHeight:16px;fontWeight:bold">{{item.productName}}
                    <span v-if="item.secondList && item.secondList.length>0"
                    style="fontSize:16px;color:skyblue;fontWeight:bold;marginLeft:10px"
                     class="iconfont icon-icon_huifu hfpz"  title="恢复辅材配置" @click="huifuPz(item)"></span>
                     </p>
                    </div>
                <div class="item">
                    <el-radio-group v-model="item.productType">
                    <el-radio :label="0">主材</el-radio>
                    <el-radio :label="1">辅材</el-radio>
                </el-radio-group>
                 <div style="display:flex">
                     <span v-if="item.productId" style="fontSize:20px;color:skyblue;fontWeight:bold;marginRight:20px" @click="jiaChuproductId(item.productId)" class="iconfont icon-07wangluoanquan_jianshao"></span>
                     <i v-else style="fontSize:20px;color:skyblue;fontWeight:bold;marginRight:20px" @click="jiaChu(item.id)" class="iconfont icon-07wangluoanquan_jianshao"></i>
                      <!-- {{item.num}}   -->
                      <input  
                       @blur="getNum(item)" type="number" style="width:70px;display:inlineBlock;textAlign:center" v-model="item.num">
                     <i v-if="item.productId" style="fontSize:20px;color:skyblue;fontWeight:bold;marginLeft:20px" class="iconfont icon-jia" @click="jiaShenproductId(item.productId)"></i>
                     <i v-else style="fontSize:20px;color:skyblue;fontWeight:bold;marginLeft:20px" class="iconfont icon-jia" @click="jiaShen(item.id)"></i>
                </div>
                <div><el-button type="text" style="color:red;marginleft:5px" @click="deleteSeleted(item)">删除</el-button></div>
               </div>
            <el-collapse style="fontSize:12px">
            <el-collapse-item v-if="item.secondList" :title="item.secondList?'辅材列表':''"
                :name="'1'">
                <div v-for="_item in item.secondList" :key="_item.id">
                  <div style="fontSize:12px;display:flex">
                       <div style="flex:1"> {{_item.productName}}</div>
                       <div style="flex:1">
                            <div><i style="fontSzie:18px;fontWeight:blod;marginRight:10px;color:skyblue" class="iconfont icon-07wangluoanquan_jianshao" @click="jian(_item.id)"></i>
                            <!-- {{_item.count}} -->
                            <input  
                            type="number" style="width:70px;display:inlineBlock;textAlign:center" v-model="_item.count">
                            <i style="fontSize:16px;marginLeft:10px;color:skyblue" class="iconfont icon-jia" @click="jia(_item.id)"></i></div>
                       </div>
                  </div>  
                </div>
            </el-collapse-item>
            </el-collapse>   
          </div>
        </div>
        <div style="textAlign:right;marginTop:20px">
            <el-button type="primary" size="small" @click="goBack">取消</el-button>
        </div>
   
    </div>
    </div>
 </div>
</template>

<script>
import {
displayAdd,
quoteEdit,
displayEdit,showType} from "@/api/request/dept"
import {translateDataToTree} from '@/utils/removal'
import {catalogList} from "@/api/request/classify"
import {removal,mergeArr} from '@/utils/removal'
import storage from '@/utils/storage'
import {
  productList,
} from "@/api/request/product"
export default {
components: {},
data() {
return {
    ExhiTitle:'添加展项',
     defaultProps: {
          children: 'childrens',
          label: 'catalogName'
     },
    total:0,
    quoteId:'',
    Allselect:[],//所有选中的包括回填的
    quotationName:"区域名称",
    productLists:[],//产品列表
    titTleDia:false,
    addEditformRules:{
            quoteTitle:[{ required: true, message: '报价单名称不能为空', trigger: 'blur' },]
     },
     titleForm:{
          quoteTitle:"",
          remark:"",
          id:""
    },
    addExhiProRules:{//添加展项和产品清单验证规则
           displayName:[
               { required: true, message: '请输入展项名称', trigger: 'blur' }
           ]
        },
    selectedProList:[],//已经选择的产品列表
    addExhiProdct:{ //添加展项及产品清单
          displayName:"",
          remark:"",
          aeraId:"",
          id:"",
          productList:[]
        },
    addExhiProdct:{ //添加展项及产品清单
          displayName:"",
          remark:"",
          aeraId:"",
          id:"",
          productList:[]
        },
      productListPage:{ //产品类别
            catalogName:"",//设备名称
            pageNum:1,//页码
            pageSize:100//条数
    },
    productpage:{//产品列表分页
        catalogId:1,
        productName:"",
        pageNum:1,
        pageSize:5
    },
    treeData:[],//树型结构数据
    Loading:false,
};

},

 computed:{
        //衍生数据到时候好用于计数器
       newProductList(){
           let newArr=JSON.parse(JSON.stringify(this.productLists))
           return newArr.map(item=>{
                item.num=0
                item.productType=0
                if(item.secondList.length>0){
                   item.secondList.forEach(_item=>{
                       _item.num=_item.count
                   })
                }
                return item
           })
       }
   },
methods: {
    getNum(row){
      
         let a=row.num
          row.num=a
          if(row.productId){
              return
          }else{
            
         this.Allselect.forEach(item=>{
            if(item.id==row.id){
                item.num=Number(item.num)
            //    item.num+=1
              if(item.secondList && item.secondList.length>0  && item.num>0){
                item.secondList.forEach(_item=>{
                    _item.count=Number(_item.count)
                    _item.num=Number(_item.num)
                    if(_item.count>0){
                        _item.count=item.num*_item.num
                    }
               })
              }
           }
      })
          }
    },
    jiaChuproductId(row){
       
        this.Allselect.forEach(item=>{ 
            if( item.productId==row &&item.num>0){
                item.num=Number(item.num)
                item.num-=1
            }
       })
    },
    jiaShenproductId(row){
        this.Allselect.forEach(item=>{
            if( item.productId==row ){
              
                item.num=Number(item.num)
                item.num+=1
            }
       })
    },
     getkeyId(row){
            return row.id
       },
    jiaShen(row){
        this.Allselect.forEach(item=>{
            if(item.id==row){
               item.num+=1
              if(item.secondList && item.secondList.length>0  && item.num>0){
                item.secondList.forEach(_item=>{
                    _item.count=Number(_item.count)
                    _item.num=Number(_item.num)
                  _item.count+=_item.num
               })
              }
           }
      })
    },
    jiaChu(row){
      this.Allselect.forEach(item=>{
          if(item.id==row ){
              if(item.num>1){
                  item.num=Number(item.num)
                  item.num-=1  
              if(item.secondList.length>0){
                item.secondList.forEach(_item=>{
                  if(_item.count>=_item.num){
                      _item.count=Number(_item.count)
                      _item.num=Number(_item.num)
                    _item.count-=_item.num

                  }
                 
               })
              }
              }
           }
      })
    },
    jia(row){
       this.Allselect.forEach(item=>{
           if(item.secondList){
               item.secondList.forEach(_item=>{
                   if(_item.id==row){
                        _item.count=Number(_item.count)
                        _item.count+=1
                      
                   }
               })
           }
       })
    },
     jian(row){
           this.Allselect.forEach(item=>{
           if(item.secondList){
               item.secondList.forEach(_item=>{
                   if(_item.id==row&&_item.count>0){
                       _item.count=Number(_item.count)
                        _item.count-=1 
                   }
               })
           }
       })
 
     },
    //  恢复辅材 配置数量
     huifuPz(row){
         row.num=1
       row.secondList.forEach(item=>{
           item.count=item.num
       })
     },
     searProduct(){
       this.getProductList()
     },
    numChange(currentValue, oldValue){   
    },
    getStyle(){
      let obj={height:"70px",overflow:"hiddren"}
      return obj
    },  
      editTitle(){
          this.titTleDia=true
      },
     TitleEdit(){
            this.$refs.addEditform.validate(val=>{
                if(val){
                quoteEdit(this.titleForm).then(res=>{
                    this.titTleDia=false
                    this.$message({
                        message:"修改成功",
                        type:'success'
                    })
                     this.titTleDia=false
                     this.quotationName=this.titleForm.quoteTitle
                },err=>{
                  
                    this.$message({
                        message:'修改失败',
                        type:"error"
                    })
                })
             }else{
                 return false
             }
         })
     },
      gaibian(sec,row){
          if(row.secondList.length>0){  
          }
         this.Allselect.forEach((item,index)=>{
             if(item.id==row.id){
               this.Allselect.splice(index,1)
             }
         })
      },
      //复选框
      handleSelectionChange(val,fal){   
          let arr= removal(val,this.Allselect)
          this.Allselect=arr
      },
      /** 查询商品分类列表 */
    getList() {
     catalogList().then(res=>{
       this.options=res.rows
      this.treeData=translateDataToTree(res.rows)
     },err=>{
       
     })
    },
    // 返回
    goBack(){
          this.$router.push({
                   path:"/region",
                   query:{
                   quoteId:this.quoteId.id
                  }
                })
    },
    ExhiDeternime(){
       this.$refs.addExhiProdctRef.validate((val)=>{
        if(val){
            if(this.ExhiTitle==="添加展项"){
                this.Allselect.forEach(item=>{
                     if(item.secondList&&item.secondList.length>0){
                          let obj1={productId:item.id,productCount:item.num,productType:item.productType}
                          if(obj1.productCount>0){
                           this.addExhiProdct.productList.push(obj1)
                       }
                          item.secondList.forEach(_item=>{ //关联的辅材
                              let obj2={productId:_item.secondId,productCount:_item.count,productType:1}
                              if(obj2.productCount>0){
                           this.addExhiProdct.productList.push(obj2)
                           }
                          })
                     }else{
                       //没有second的情况
                      let obj3={productId:item.id,productCount:item.num,productType:item.productType}
                       if(obj3.productCount>0){
                           this.addExhiProdct.productList.push(obj3)
                       }
                     }
                    // 最后要将主材等于辅材的情况合并
                    // 合并去重
                        let  a=JSON.parse(JSON.stringify(this.addExhiProdct.productList))
                        let b=mergeArr(a)
                       
                        this.addExhiProdct.productList=b
                })
                displayAdd(
                   {"aeraId":this.addExhiProdct.aeraId,
                    "quoteId":this.quoteId.id,
                   "displayName":this.addExhiProdct.displayName,"productList":this.addExhiProdct.productList}
                 ).then(res=>{
                     this.$message({
                        message:"恭喜你,新增展项和产品清单成功",
                        type:"success"
                     })
                     this.dialogVisibleTwo=false
                     this.getList()
                  this.$router.push({
                   path:"/region",
                   query:{
                   quoteId:this.quoteId.id
                  }
                })
                 },err=>{
                  
                     this.$message({
                        message:"很遗憾,新增展项和产品清单失败",
                        type:"error"
                     })
                 })   
              } else{  //编辑
                    this.addExhiProdct.productList=[]
                    // 发生接口的时候处理一下
                    this.Allselect.forEach(item=>{
                        if(item.secondList){//有辅材的情况
                            let obj={productId:item.id,productCount:item.num,productType:item.productType}//先加主材
                            if(obj.productCount>0){ //判断数量大于0不
                                  this.addExhiProdct.productList.push(obj)
                            }
                            //  this.addExhiProdct.productList.push(obj)
                             item.secondList.forEach(_item=>{ //加上主材里面的辅材
                                 let obj={productId:_item.secondId,productCount:_item.count,productType:1}
                                   if(obj.productCount>0){ //判断数量大于0不
                                  this.addExhiProdct.productList.push(obj)
                                 }
                                //  this.addExhiProdct.productList.push(obj)
                             })
                        }else if(item.productId){
                            let obj={productId:item.productId,productCount:item.num,productType:item.productType}//先加主材
                            if(obj.productCount>0){ //判断数量大于0不
                                  this.addExhiProdct.productList.push(obj)
                            }
                            //  this.addExhiProdct.productList.push(obj)
                        }
                        else{//没有辅材的情况
                            let obj={productId:item.id,productCount:item.num,productType:item.productType}
                              if(obj.productCount>0){//判断数量大于0不
                                  this.addExhiProdct.productList.push(obj)
                              }
                        }
                })
                // 合并去重
                let  a=JSON.parse(JSON.stringify(this.addExhiProdct.productList))
                 let b=mergeArr(a)
               
                 this.addExhiProdct.productList=b
               displayEdit({
                   "id":this.addExhiProdct.id,"displayName":this.addExhiProdct.displayName,
                    "quoteId":this.quoteId.id,
                   "productList":this.addExhiProdct.productList
               }).then(res=>{
                   this.$message({
                       message:"修改成功",
                       type:"success"
                   })
                      this.$router.push({
                   path:"/region",
                })    
               },err=>{
                   this.$message({
                       message:"修改失败",
                       type:"error"
                   })
               })
            }
        }else{
                this.$message({
                    message:"亲,请把表单填写完整哟",
                    type:"warning"
                })
                return false
            }
        })
    },
     //获取商品列表
     getProductList(){
         this.Loading=true
        productList(this.productpage).then(res=>{
          this.Loading=false
          this.productLists=res.rows
          this.total=res.total
        },err=>{
        })
     },
     //删除展项已经添加的产品
    deleteSeleted(val){   
      this.Allselect.forEach((item,index)=>{
          if(this.ExhiTitle==="添加展项"){
           
           if(item.id===val.id){ 
                  this.$refs.multipleTable.toggleRowSelection(item,false);
           
                  this.Allselect.splice(index,1)
                    
                }

          }
          else{
           
                if(item.productId){ 
                
                    if(item.productId == val.productId){
                     
                        this.Allselect.splice(index,1)   
                    }
                }else{
                    if(item.id===val.id){
                         this.$refs.multipleTable.toggleRowSelection(item,false);
                         this.Allselect.splice(index,1)
                    }
                }
    
          }

        })   
      },
      handleCheckChange(data, checked, indeterminate) {
     
        this.productpage.catalogId=data.id
        this.getProductList()
     },
      handleSizeChange(val){
       this.productpage.pageSize=val
       this.getProductList()
    },
    handleCurrentChange(val){
       this.productpage.pageNum=val
       this.getProductList()
    },
},

mounted() {
    this.Allselect=[]
    let {id,areaName}=this.$route.query
    this.quoteId=storage.quoteId
     
    this.addExhiProdct.aeraId=id
    this.quotationName=areaName
 
     this.getProductList()
    this.getList()
    //回填的产品信息
    let mess=storage.displayEdiet
        mess.productList.forEach(item=>{
            item.num=item.productCount
    })
    this.addExhiProdct.id=mess.id
    // 最后要将主材等于辅材的情况合并
    this.Allselect=mess.productList
 
    this.ExhiTitle=storage.title?storage.title:"添加展项"
  
    if(this.ExhiTitle==="添加展项"){
        this.Allselect=[]
    }else{
        this.addExhiProdct.displayName=mess.displayName
    }
    
},
}
</script>
<style  scoped>
.overCell{
 width:250px;
 height:70px !important;
 padding:10 20px;
 overflow:hidden;
 text-overflow:ellipsis;
 /* white-space:wrap;*/
 word-break:keep-all; 
 display:-webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
 
}
.el-input-number__decrease{
    width:12px;
}
.item{
    height:50px;
    padding:5px 0px;
    line-height:30px;
    display:flex;
    justify-content:space-between;
    align-items:center;
    /* border-bottom:1px solid #F0F0F0; */
}
.hfpz:hover{
  cursor: pointer;
}
.shopBox{
    width:20%;
    margin-left:5px;
}
.shopBoxTop{
     height:550px;
     padding:0px 10px;
      border:1px solid  #D5D5D5;
     overflow-y: auto;
}
</style>